<template>
	<view>
		<!--header-->
		<view class="tui-header-box" :style="{height:CustomBar + 'rpx',	background:'linear-gradient(45deg, rgba(0,129,255,' + opcity + '), rgba(29,194,187,' + opcity + '))'}">
			<view class="tui-header" :style="{paddingTop:40+'rpx', opacity:opcity}">
				商品详情
			</view>
			<view class="tui-header-icon" :style="{top: 24 +'rpx'}">
				<view class="tui-icon tui-icon-arrowleft tui-icon-back" :style="{background:'rgba(0, 0, 0,'+iconOpcity+')'}"
				 @tap="back"></view>
				<!-- <view class="tui-icon tui-icon-more-fill  tui-icon-ml" :style="{color:opcity>=1?'#000':'#fff',background:'rgba(0, 0, 0,'+iconOpcity+')',fontSize:'20px'}"
				 @tap.stop="openMenu"></view> -->
			</view>
		</view>
		<!--header-->
	</view>
</template>

<script>
	export default {
		name:"DetailHeader",
		data() {
			return {
				CustomBar:this.CustomBar,
				StatusBar:this.StatusBar
			}
		},
		props:{
			opcity:{
				type:Number,
				default:0
			},
			iconOpcity: {
				type:Number,
				default:0.5
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style>
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		color: #FFFFFF;
		z-index: 9998;
	}
	.tui-header {
		width: 100%;
		font-size: 32rpx;
		line-height: 36rpx;
		font-weight: 500;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tui-icon-arrowleft::after{
		content: "\E679";
		font-family: cuIcon;
		font-size: 40rpx;
	}
	.tui-header-icon {
		position: fixed;
		top: 0;
		left: 20rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 60rpx;
		transform: translateZ(0);
		z-index: 99999;
	}
	
	.tui-icon {
		border-radius: 32rpx;
		line-height: 54rpx;
		text-align: center;
	}
	
	
	.tui-icon-back {
		height: 54rpx !important;
		width: 54rpx !important;
		display: block !important;
	}
	
	.tui-header-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -8rpx;
	}
	.tui-header-icon .tui-icon-more-fill {
		height: 40rpx !important;
		width: 40rpx !important;
		padding: 12rpx !important;
		display: block !important;
	}
</style>
